﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/AudioMini/AudioMini.js"></script>
    <link href="../Scripts/AudioMini/AudioMini.css" rel="stylesheet" />
</head>
<body>
    <img src="http://musicdata.baidu.com/data2/pic/b8aecedd9f9ca87f6298d76c8e1b73de/262388734/262388734.jpg" />
    <h1>一般模式</h1>
    <br /><br />

    <div class="audio-common">
        <div class="bg-group">
            <div class="bg"></div>
            <div class="bg-mask"></div>
            <div class="bg-ie"></div>
        </div>

        <div class="audio-switch">
            <div class="switch-bg"></div>
            <div class="switch-text">音乐</div>
            <div class="switch-icon">
                <img src="" />
            </div>
        </div>

        <div class="audio-cover">
            <img src="http://musicdata.baidu.com/data2/pic/b8aecedd9f9ca87f6298d76c8e1b73de/262388734/262388734.jpg" />
            <div class="bg-cover"></div>
        </div>

        <div class="audio-info">
            <div class="name">海阔天空</div>
            <div class="singer">Byond</div>
        </div>

        <div class="audio-btn-div">
            <span class="iconaudio icon-prev"></span>
            <span class="iconaudio icon-stop"></span>
            <span class="iconaudio icon-next"></span>
            <span class="iconaudio icon-loop"></span>
        </div>

        <div class="audio-progress">
            <div class="pro-group">
                <div class="pro-bg"></div>
                <div class="pro-buffer"></div>
                <div class="pro-cur"></div>
                <div class="pro-circle"></div>
            </div>
            <div class="cur-time">
                02:10
            </div>
        </div>

        <div class="audio-right">
            <div class="audio-volume">
                <div class="iconaudio icon-volume"></div>
                <div class="volume-panel">
                    <div class="volume-bg"></div>
                    <div class="volume-cur"></div>
                    <div class="volume-circle"></div>
                </div>
            </div>

            <div class="audio-menu">
                <span class="iconaudio icon-list"></span>
            </div>
            <div class="audio-fold">
                <span class="iconaudio icon-pre"></span>
            </div>
        </div>
        <div class="audio-clear"></div>
    </div>



  <br /><br />

    <div id="audio1"></div>


    <script>
        /*简单模式*/
        $('#audio1').audioMini({
            name: '海阔天空',
            singer: 'Byong',
            url: '../content/audio/海阔天空.mp3',
            pic: 'http://musicdata.baidu.com/data2/pic/b8aecedd9f9ca87f6298d76c8e1b73de/262388734/262388734.jpg',
            type: 1,
            autoPlay: true,
            loop: false
        });
    </script>
</body>
</html>
